<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- 
Use David Olsson's 'MCAS data - subject - less' report,
https://dwhsep.doemass.org:443/cognos8/cgi-bin/cognosisapi.dll?b_action=cognosViewer&ui.action=run&ui.object=%2fcontent%2ffolder%5b%40name%3d%27District%20Folders%27%5d%2ffolder%5b%40name%3d%27Shared%20-%20District%20Report%20Authors%20-%20Not%20ESE%20Validated%27%5d%2ffolder%5b%40name%3d%27CEDU%27%5d%2ffolder%5b%40name%3d%27Work%20in%20progress%20-%20Caution!%27%5d%2ffolder%5b%40name%3d%27MCAS%27%5d%2freport%5b%40name%3d%27MCAS%20data%20-%20subject%20-%20less%27%5d&ui.name=MCAS%20data%20-%20subject%20-%20less&run.outputFormat=CSV&run.prompt=true
to obtain data from the education data warehouse.
Use convertMCAS.pl to prepare data as "MCAS.js".
-->
<html>
	<head>
		<script type="text/javascript" src="protovis-d3.2.js"></script>
        <script type="text/javascript" src="../../../../..//Desktop/My Dropbox/edu/visualization/javascript/data/Northampton MCAS.js"></script> 
        <style type="text/css">
        </style>
    </head>
<body>
    <h2 id="plot_title">English Language Arts CPI</h2>
    <table>
        <tr>
            <td id="main_plot_el" style="width: 420px; height: 320px"></td>
            <td id="side_plot_el" style="width: 320px; height: 220px; vertical-align: bottom; padding-left: 20px"></td>
        </tr>
    </table>
    <script type="text/javascript+protovis">

var plot = new Object();
plot.width = 400;
plot.height = 300;
plot.series = [];
plot.subject = '';
plot.grade = '';
plot.getData = function(subject, grade)
{
    this.subject = subject;
    this.grade = grade;
    var test = MCAS[subject][grade];
    for (var year in test)
        this.series.push({'year': year, 
                          'cpi': pv.mean(test[year].map(function(v) v[8]).filter(function(v) v === 0 || v > 0))});
}
plot.getData('English', '6');
plot.x = new pv.Scale.ordinal().domain(plot.series.map(function(d) d.year)).split(0, plot.width)
plot.y = new pv.Scale.linear().domain(0, 100).range(0, plot.height);
plot.vis = new pv.Panel()
    .canvas('main_plot_el')
    .width(plot.width)
    .height(plot.height)
    .bottom(20)
    .left(20)
    .strokeStyle('lightgray');
plot.vis.add(pv.Rule)
    .data(pv.range(0,100,10))
    .bottom(function(d) plot.y(d))
    .strokeStyle('lightgray')
    .anchor('left').add(pv.Label)
    .text(function(d) d);
plot.vis.add(pv.Line)
    .data(plot.series)
    .left(function(d) plot.x(d.year))
    .bottom(function(d) plot.y(d.cpi))
    .add(pv.Dot)
    ;
plot.vis.add(pv.Label)
    .data(plot.series)
    .left(function(d) plot.x(d.year))
    .bottom(-20)
    .textAlign('center')
    .text(function(d) d.year);
plot.vis.render();

function drawHistogram(year) {
    var w = 300;
    var h = 200;
    var hist = new pv.histogram(MCAS[plot.subject][plot.grade][year], function(d) d[8]);
    var bins = hist.bins([0, 25, 50, 75, 100, 125]);
    var x = new pv.Scale.ordinal([0, 25, 50, 75, 100]).splitBanded(0, w);
    var y = new pv.Scale.linear(0, pv.max(bins, function(b) b.y)).range(0, h);
    var vis = new pv.Panel()
        .canvas('side_plot_el')
        .width(w)
        .height(h)
        .bottom(20)
        .left(20)
        .strokeStyle('lightgray');
    vis.add(pv.Rule)
        .data(y.ticks())
        .bottom(function(t) y(t))
        .strokeStyle('lightgray')
        .anchor('left').add(pv.Label)
        .text(function(t) y.tickFormat(t))
        ;
    vis.add(pv.Bar)
        .data(bins)
        .left(function(b) x(b.x))
        .width(x.range().band)
        .bottom(0)
        .height(function(b) y(b.y))
    .root.add(pv.Label)
        .data(bins)
        .textAlign('center')
        .left(function(b) x(b.x) + 0.5 * x.range().band)
        .textBaseline('top')
        .bottom(0)
        .text(function(b) b.x)
        ;
    vis.render();
}
drawHistogram(2010);
</script>
</body>
</html>
